<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link href="../../../layui/css/layui.css" rel="stylesheet">
</head>
<body>
<style>
  .demo-login-container{width: 320px; margin: 21px auto 0;}
  .demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form">
  <div class="demo-login-container">
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username"  placeholder="用户名:123" required>

        <span class="error" id="usernameError"></span>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" placeholder="密码:123" required>
        <span class="error" id="passwordError"></span>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-row">
        <div class="layui-col-xs7">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-vercode"></i>
            </div>
            <label for="verificationCode">Verification Code:</label>
            <input type="text" id="verificationCode" name="verificationCode" required>
            <span class="error" id="verificationCodeError"></span>
          </div>
        </div>
        <div class="layui-col-xs5">
          <div style="margin-left: 10px;">
            <img src="https://www.oschina.net/action/user/captcha" onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
          </div>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
      <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
    </div>
    <div class="layui-form-item">
      <form action="" method="post">
        <!-- 表单内容 -->
        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
      </form>
    </div>
    <div class="layui-form-item demo-login-other">
      <label>社交账号登录</label>
      <span style="padding: 0 21px 0 6px;">
        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
      </span>
      或 <a href="">注册帐号</a>
    </div>
  </div>
</form>




<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="../../../layui/css/layui.css"></script>
<script>
  layui.use(function(){
    var $ = layui.$;
    var form = layui.form;
    var layer = layui.layer;
    // 自定义验证规则
    var registrationForm = document.getElementById('registrationForm');
    var usernameInput = document.getElementById('username');
    var passwordInput = document.getElementById('password');
    var verificationCodeInput = document.getElementById('verificationCode');
    var usernameError = document.getElementById('usernameError');
    var passwordError = document.getElementById('passwordError');
    var verificationCodeError = document.getElementById('verificationCodeError');

    registrationForm.addEventListener('submit', function(event) {
      var isValid = true;

      // 验证用户名
      if (usernameInput.value.length < 5) {
        isValid = false;
        usernameError.textContent = 'Username must be at least 5 characters long.';
      } else {
        usernameError.textContent = '';
      }

      // 验证密码
      if (passwordInput.value.length < 8) {
        isValid = false;
        passwordError.textContent = 'Password must be at least 8 characters long.';
      } else {
        passwordError.textContent = '';
      }

      // 验证验证码
      if (verificationCodeInput.value.length !== 6) {
        isValid = false;
        verificationCodeError.textContent = 'Verification code must be 6 characters long.';
      } else {
        verificationCodeError.textContent = '';
      }

      if (!isValid) {
        event.preventDefault(); // 阻止表单提交
      }
    });

    // 提交事件
    form.on('submit(demo-login)', function(data){
      var field = data.field; // 获取表单字段值
      // 显示填写结果，仅作演示用
      layer.alert(JSON.stringify(field), {
        title: '当前填写的字段值'
      });
      // 此处可执行 Ajax 等操作
      // …
      var jsonf = JSON.stringify(field);
      $.ajax({
        url: '/toregists', // Spring MVC 控制器路径
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: jsonf,
        // 服务器端返回的预期数据类型
        // dataType: 'json',
        // 发送成功以后的回调函数
        success: function (successResponseData) {
          // 请求成功后的操作
          layer.msg(successResponseData);
        },
        // 发送失败后的回调函数
        error: function (failedResponseData) {
          // 请求失败的操作
          layer.msg(failedResponseData);
        }
      });

      return false; // 阻止默认 form 跳转
    });
  });
</script>

</body>
</html>